<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: zhang00001 774004514@qq.com
 * @LastEditTime: 2024-08-02 17:25:48
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      :title="'回复评论'"
      placement="right"
      :maskClosable="false"
      :keyboard="false"
      width="800"
      @close="showAddDialog = false"
      v-model:open="showAddDialog"
    >
      <a-form
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        ref="formRef"
      
      
        label-position="top"
      >
        <a-form-item
          label="建议内容"
          required
          name="title"
        >
          {{ editDialogConfig.data.content }}
        
        </a-form-item>
        <a-form-item
          label="建议凭证"
          required
          name="image"
        >
          <div v-if="editDialogConfig.data?.imgs">
            <a-image-preview-group>
            <template v-for="item in editDialogConfig.data?.imgs?.split(',')">
              <a-image
               style="width: 150px; height: 150px; margin-right: 10px"
                :src="item"
              />
              
            </template>
          </a-image-preview-group>
          </div>

     
        </a-form-item>
        <a-form-item
          label="回复内容"
        
          name="replyTextarea"
        >
          <a-textarea
         :auto-size="{ minRows: 2, maxRows: 5 }"
            placeholder="请输入内容"
            v-model:value="replyTextarea"
          ></a-textarea>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button @click="showAddDialog = false">取消</a-button>

          <a-button
            style="margin-left: 20px"
            type="primary"
            @click="replySave"
          >
            确 定
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>
  </div>
</template>

<script setup>
  import { extractImageUrls, deleteMultiples } from '@/utils/power.js'
  import { message } from 'ant-design-vue'
  import config from '@/config/index.js'
  import previewEditor from '@/components/previewEditor.vue'
  import { newsAdd, newsUpdate, adminDelTag, replyAdvices } from '@/api/index.js'
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'
  import Collect from 'collect.js'
  const emits = defineEmits(['success', 'close'])
  const props = defineProps({})
  const showAddDialog = ref(false)
  const loading = ref(false)
  const formRef = ref()
 
  const editDialogConfig = reactive({
    visible: false,
    data: {}
  })
  const replyTextarea = ref('')
  const replySave = () => {
    if (!replyTextarea.value) {
      return message.error('请输入回复内容')
    }
    replyAdvices({
      content: replyTextarea.value,
      complaint_id: editDialogConfig.data.complaint_id
      // picture: ''
    }).then((res) => {
      if (res.errorCode) {
        message.error(res.msg)
        return
      }
      showAddDialog.value = false
      message.success('回复成功')
      emits('success')
    })
  }
  const previewEditorEle = ref(null)
 
  const uploadVisible = ref(false)
 
  const dateRow = ref()
  const richImage = ref(null)
  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
 
      editDialogConfig.data = row
      replyTextarea.value = null
    })
    //
  }
  defineExpose({
    init
  })
</script>

<style scoped></style>
